<link rel="stylesheet" href="js/lay-module/step-lay/step.css" media="all">
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                        <div carousel-item>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">名称:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="taskName" id="taskName" placeholder="请输入名称"
                                                   class="layui-input" lay-verify="required"/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">备注:</label>
                                        <div class="layui-input-block">
                                            <textarea placeholder="请输入备注" name="taskComment" id="taskComment" value=""
                                                      class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="formStep">
                                                &emsp;下一步&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">模板名称:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux" id="readonlyTaskName"></div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">站点名称:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="siteRuleName" placeholder="请输入名称"
                                                   class="layui-input" lay-verify="required"/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">站点URL规则:</label>
                                        <div class="layui-input-block">
                                            <select name="scanType" lay-filter="scanType">
                                                <option value="2">暴力扫描</option>
                                                <option value="1" selected="">URL列表</option>
                                            </select>
                                            <div class="layui-unselect layui-form-select layui-form-selected">
                                                <div class="layui-select-title"><input type="text" placeholder="请选择"
                                                                                       value="阅读" readonly=""
                                                                                       class="layui-input layui-unselect"><i
                                                            class="layui-edge"></i></div>
                                                <dl class="layui-anim layui-anim-upbit" style="">
                                                    <dd lay-value="2" class="">暴力扫描</dd>
                                                    <dd lay-value="1" class="layui-this">URL列表</dd>
                                                </dl>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item force-scan">
                                        <label class="layui-form-label">透传参数:</label>
                                        <div class="layui-input-inline" style="width: 100px">
                                            <input type="number" name="startNumber" placeholder="起始数"
                                                   class="layui-input"/>
                                        </div>
                                        <div class="layui-form-mid">-</div>
                                        <div class="layui-input-inline" style="width: 100px">
                                            <input type="number" name="endNumber" placeholder="结束数"
                                                   class="layui-input"/>
                                        </div>
                                        <div class="layui-form-mid">-</div>
                                        <div class="layui-input-inline" style="width: 100px">
                                            <input type="number" name="intervalNumber" value="0" placeholder="间隔数"
                                                   class="layui-input"/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item force-scan">
                                        <label class="layui-form-label">URL模式:</label>
                                        <div class="layui-input-block">
                                            <textarea name="urlPattern"
                                                      placeholder="请输入一条URL,透传参数key部分包含在$[和]之间，比如$[key]" value=""
                                                      class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item url-list">
                                        <label class="layui-form-label">URL列表:</label>
                                        <div class="layui-input-block">
                                            <textarea name="urlList" placeholder="请输入URL,多条URL以换行符分隔" value=""
                                                      class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStep2">
                                                &emsp;完成种子&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle"
                                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                        配置成功
                                    </div>
                                </div>
<#--                                <div style="text-align: center;margin-top: 50px;">-->
<#--                                    <button class="layui-btn layui-btn-primary" id="configPageRule" layuimini-content-href="/pageRule/showPageRulesSetting" data-title="页面规则配置">配置页面规则</button>-->
<#--                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    layui.use(['form', 'step'], function () {
        var $ = layui.$,
            form = layui.form,
            step = layui.step;
        var miniPage = layui.miniPage;


        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        form.on('select(scanType)', function (data) {
            if (data.value === "1") {
                $(".force-scan").hide();
                $(".url-list").show();
            } else if (data.value === "2") {
                $(".force-scan").show();
                $(".url-list").hide();
            }
        });

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '700px',
            stepItems: [{
                title: '新建模板'
            }, {
                title: '新增种子'
            }, {
                title: '完成'
            }]
        });

        $(".force-scan").hide();
        $(".url-list").show();

        form.on('submit(formStep)', function (data) {
            $("#readonlyTaskName").text($("#taskName").val())
            step.next('#stepForm');
            return false;
        });

        form.on('submit(formStep2)', function (data) {
            var taskName = $("#taskName").val();
            var taskComment = $("#taskComment").val();
            var siteUrlRule = {}
            if (data.field.scanType == 2) {
                siteUrlRule = {
                    scanType: 2,
                    params: {
                        start: data.field.startNumber,
                        end: data.field.endNumber,
                        interval: data.field.interval
                    },
                    urlPattern: data.field.urlPattern
                }
            } else if (data.field.scanType == 1) {
                siteUrlRule = {
                    scanType: 1,
                    urlPattern: data.field.urlList
                }
            }

            var requestData = {
                taskName: taskName,
                comment: taskComment,
                siteRuleName: data.field.siteRuleName,
                siteRule: JSON.stringify(siteUrlRule),
                cronConfig: null,
                executionStartTime: null,
                executionEndTime: null,
            }

            $.ajax({
                url: "/task/createTaskAndSiteRule",
                type: 'post',
                data: requestData,
                success: function (data) {
                    if (data.code == 100) {
                        var taskId = data.data;
                    } else {
                        return layer.msg('Code:' + data.code + '，' + data.msg + '，请稍后再试！');
                    }
                },
                error: function (xhr, textstatus, thrown) {
                    return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
                }
            });
            step.next('#stepForm');
            return false;
        });

        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {
            step.next('#stepForm');
        });
    })
</script>
